<script setup>
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import Card from '@/views/new-screen/components/card.vue'
import DrawEcharts from '@/components/draw-echarts.vue'
import yycg from '../../../../assets/imgs/bt_yycg_nor.png'
import sjfws from '../../../../assets/imgs/bt_sjfws_nor.png'
import fkzrs from '../../../../assets/imgs/bt_fkzrs_nor.png'
import jzmj from '../../../../assets/imgs/ic_jzmj.png'
import rzqys from '../../../../assets/imgs/ic_rzqys.png'
import fwzs from '../../../../assets/imgs/ic_fwzs.png'
import test1 from '../../../../assets/imgs/img1@2x.png'
import test2 from '../../../../assets/imgs/img2@2x.png'
import {
  getHouseDeal,
  getHouseSafe,
  getPropertyManage,
  getCityUpdate
} from '../api.js'

let measure, _viewer, _layerManager

const mapId = inject('mapId')
const parkList = inject('parkList')

const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const dangerousHouseChartRef = ref(null)
const cityUpdateChartRef = ref(null)

// '柏梓镇','宝龙镇','别口镇','崇龛镇','古溪镇','花岩镇','龙形镇','米心镇','双江镇','寿桥镇','太安镇','塘坝镇','卧佛镇','五桂镇','小渡镇','新胜镇','玉溪镇','上和镇','群力镇','田家镇'
const dangerHouseData = [
  { title: '武鸣', value: '23' },
  { title: '西乡塘', value: '1464' },
  { title: '兴宁', value: '1066' },
  { title: '江南', value: '671' },
  { title: '青秀', value: '897' },
  { title: '良庆', value: '173' },
]

const getRadarChartOption = (list) => {
  const valueList = list.map(item => {
    return +item.value
  })
  const max = Math.max(...valueList)
  const indicator = list.map(item => {
    return { name: item.name + ' ' + item.value + '栋', max }
  })
  return {
    title: {
      text: '各城区危房数量',
      textStyle: {
        color: '#fff',
      },
    },
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis'
    },
    radar: [
      {
        indicator: indicator,
        radius: 80,
        center: ['50%', '50%']
      },
    ],
    series: [
      {
        type: 'radar',
        tooltip: {
          trigger: 'item'
        },
        areaStyle: {},
        data: [
          {
            // value: [23, 1464, 1066, 671, 173],
            value: valueList,
          }
        ]
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}

const getBarChartOption = ({ names, values }) => {
  return {
    title: {
      text: '各城区老旧小区数量',
    },
    xAxis: {
      type: 'category',
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      data: names,
      axisLabel: {
        showMaxLabel: true,
        color: '#ffffff',
        fontSize: 9,
        // textStyle: {
        // },
        rotate: -45,
        padding: [3, 0, 0, 0],
      },
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data: values,
        type: 'bar',
        // barWidth: 16,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#eeff03' },
            { offset: 0.5, color: '#7a8201' },
            { offset: 1, color: '#000000' },
          ])
        },
        label: {
          show: true,
          position: 'top',
          valueAnimation: true,
          color: '#fff'
        }
      }
    ],
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [{
          offset: 0, color: '#01153c21' // 0% 处的颜色
      }, {
          offset: 1, color: '#01153c89' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
}
let propertyManagementList = ref([
  {
    label: '本地企业数',
    value: 0,
    img: fwzs,
    unit: '家',
    key: 'localNum',
  },
  {
    label: '外地企业数',
    value: 0,
    img: jzmj,
    unit: '家',
    key: 'otherNum',
  },
  {
    label: '加入物业协议企业',
    value: 0,
    img: rzqys,
    unit: '家',
    key: 'joinedNum',
  },
  {
    label: '物业项目数',
    value: 0,
    img: rzqys,
    unit: '个',
    key: 'projectNum',
  },
])

const updateChartDangerousHouse = (data) => {
  const list = data.filter((e) => e.house_num > 0).map((item) => {
    return {
      name: item.name,
      value: item.house_num,
    }
  })
  dangerousHouseChartRef.value?.updateOption(getRadarChartOption(list))
}

const updateDataPropertyManage = (data) => {
  Object.entries(data).forEach(([key, value]) => {
    const target = propertyManagementList.value.find((e) => e.label === key)
    target && (target.value = value)
  })
}

const updateChartCityUpdate = (data) => {
  const updateOption = getBarChartOption({ names: data.cityNmae, values: data.houseNum })
  cityUpdateChartRef.value?.updateOption(updateOption)
}

const reqData = () => {
  Promise.all([
    getHouseSafe(),
    getPropertyManage(),
    getCityUpdate()
  ]).then(([houseSafe, propertyManage, cityUpdate]) => {
    console.log('houseSafe', houseSafe)
    console.log('propertyManage', propertyManage)
    console.log('cityUpdate', cityUpdate)
    if (houseSafe.success) {
      updateChartDangerousHouse(houseSafe.data?.data || [])
    }
    if (propertyManage.success) {
      updateDataPropertyManage(propertyManage.data)
    }
    if (cityUpdate.success) {
      updateChartCityUpdate(cityUpdate.data)
    }
  })
}


onMounted(async () => {
  reqData()
  // setTimeout(() => {
  //   updateChart()
  // }, 300)
})
onBeforeUnmount(() => {
  
})
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <card name="房屋安全" class="house-security">
      <!-- <div class="title">各城区危房数量</div> -->
      <div class="chart">
        <draw-echarts
          ref="dangerousHouseChartRef"
          width="420"
          height="280"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
    <card name="物业管理" class="property-management">
      <div class="box-list">
        <div class="box-item" v-for="(item, i) in propertyManagementList" :key="i">
          <div class="box-item-img">
            <img :src="item.img" alt />
          </div>
          <div class="box-item-right">
            <div class="box-item-right-title">{{ item.label }}</div>
            <div class="box-item-right-value">
              <div class="box-item-right-num">{{ item.value }}</div>
              <div class="box-item-right-unit">{{ item.unit }}</div>
            </div>
          </div>
        </div>
      </div>
    </card>
    <card name="城市更新" class="city-update">
      <div class="chart">
        <draw-echarts
          ref="cityUpdateChartRef"
          width="420"
          height="260"
          :options="{}"
        ></draw-echarts>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.right {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .right-close {
    height: 100%;
    position: absolute;
    right: 0;

    img {
      height: 16px;
      width: 16px;
      cursor: pointer;
    }
  }

  .area-title {
    display: flex;
    height: 21px;
    position: relative;

    &-left {
      height: 100%;
      width: 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-image: url('@/assets/imgs/tab_yq_d.png');
      margin-left: 10px;
      display: flex;
      justify-content: flex-start;
      padding-left: 20px;

      &-names {
        display: flex;
        justify-content: flex-start;
      }

      &-name {
        font-family: Source Han Sans SC;
        font-weight: bold;
        font-size: 16px;
        color: #00a6ff;
        background: linear-gradient(0deg, #8dc4ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        cursor: pointer;
      }

      .is-active {
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        background: linear-gradient(259deg, #fff4c8 0%, #ffc152 98.9990234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .house-security {
    height: 328px;
    margin-bottom: var(--card-margin-bottom);
    color: #eee;
  }

  .property-management {
    height: 260px;
    margin-bottom: var(--card-margin-bottom);
    color: #fff;
    .box-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .box-item {
        width: 45%;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        margin-left: 10px;

        .box-item-img {
          width: 80px;
          height: 80px;
          img {
            object-fit: contain;
            width: 100%;
            height: 100%;
          }
        }
        .box-item-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          color: #ccc;
          font-size: 14px;
          .box-item-right-title {
            width: 70%;
          }
          .box-item-right-value {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            
            .box-item-right-num {
              font-family: Source Han Sans SC;
              font-weight: bold;
              font-size: 24px;
              color: #fff;
            }
            .box-item-right-unit {
              color: #979797;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .city-update {
    height: 314px;
  }
}
</style>
